<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			http-equiv="origin-trial"
			content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9"
		/>
		<title>Video</title>
		<!-- <link rel="stylesheet" href="./index.scss" /> -->
		<style>
			* {
				box-sizing: border-box;
			}

			html {
				background: #692a84;
				background: linear-gradient(316deg, #0e0f2a, #060913);
				width: 100%;
				height: 100%;
			}

			body {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				overflow: hidden;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}

			#app {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app"></div>
		<script type="module">
			import { Model, Context, Texture, RenderTarget, Attachment, Sampler } from "../../dist/index.js";
			import { mat4, vec3 } from "../lib/esm/index.js";
			import { cubeVertexArray, cubeVertexCount, uvs, colors, positions } from "../asset/cude.js";
			const init = async () => {
				const context = new Context({
					canvas: null,
					container: document.getElementById("app"),
					pixelRatio: 1
				});
				const { canvas, presentationFormat } = context;
				await context.init();
				const { width, height, depth } = context.presentationSize;
				const colorAttachment = new Attachment(
					{ r: 0.0, g: 0.0, b: 0.0, a: 0 },
					{
						textureView: () => {
							return context.context.getCurrentTexture().createView();
						}
					}
				);
				const video = document.createElement("video");
				video.loop = true;
				video.autoplay = true;
				video.muted = true;
				video.src = new URL("../asset/video/big.mp4", import.meta.url).toString();
				await video.play();
				// videoHeight
				//  videoWidth

				debugger;
				const response = await fetch(new URL("../textures/Di-3d.png", import.meta.url).toString());
				const imageBitmap = await createImageBitmap(await response.blob());
				const depthTexture = new Texture({
					label: "resolveDepth",
					textureDescriptor: {
						size: { width, height, depth },
						format: "depth24plus",
						usage: GPUTextureUsage.RENDER_ATTACHMENT
					}
				});
				const texture = new Texture({
					textureDescriptor: {
						size: {
							width: video.videoWidth,
							height: video.videoHeight,
							depth: 1
						},
						format: "rgba8unorm",
						usage:
							GPUTextureUsage.TEXTURE_BINDING |
							GPUTextureUsage.COPY_DST |
							GPUTextureUsage.RENDER_ATTACHMENT
					},
					data: {
						source: video
					},
					dynamic: true
				});
				const sampler = new Sampler({
					magFilter: "linear",
					minFilter: "linear"
					// addressModeU: "repeat",
					// addressModeV: "repeat"
				});
				const depthAttachment = new Attachment(1.0, { texture: depthTexture });
				const canvasRenderTarget = new RenderTarget("render", [colorAttachment], depthAttachment);
				const aspect = canvas.width / canvas.height;
				const projectionMatrix = mat4.perspective([], (2 * Math.PI) / 5, aspect, 1, 100.0);
				const modelViewProjectionMatrix = mat4.create();
				const model = new Model({
					shaderId: "model",
					frag: `
              @group(0) @binding(2) var mySampler: sampler;
              @group(0) @binding(1) var myTexture: texture_2d<f32>;

              @fragment
              fn main(
                @location(0) fragUV: vec2<f32>,
                @location(1) fragPosition: vec4<f32>
              ) -> @location(0) vec4<f32> {
                   return textureSample(myTexture, mySampler, fragUV);
              }
              `,
					vert: `
            struct Uniforms {
              modelViewProjectionMatrix : mat4x4<f32>,
            }
            @binding(0) @group(0) var<uniform> uniforms : Uniforms;

            struct VertexOutput {
              @builtin(position) Position : vec4<f32>,
              @location(0) fragUV : vec2<f32>,
              @location(1) fragPosition: vec4<f32>,
            }

            @vertex
            fn main(
              @location(0) position : vec4<f32>,
              @location(1) color : vec4<f32>,
              @location(2) uv : vec2<f32>
            ) -> VertexOutput {
              var output : VertexOutput;
              output.Position = uniforms.modelViewProjectionMatrix * position;
              output.fragUV = uv;
              output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
              return output;
            }
               `,
					vertexBuffers: [
						{
							stepMode: "vertex",
							uid: "vertAttr",
							attributes: {
								interleaved: {
									names: ["position", "color", "uv"],
									value: cubeVertexArray,
									itemSizes: [4, 4, 2]
								} //interleaved buffer
							}
						}
					],
					uniformBuffers: [
						{
							type: "uniform",
							uid: "systemMatrix",
							uniforms: {
								modelViewProjectionMatrix: {
									type: "mat4x4<f32>",
									value: () => {
										let viewMatrix = mat4.identity([]);
										mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
										const now = Date.now() / 1000;
										mat4.rotate(
											viewMatrix,
											viewMatrix,
											1,
											vec3.fromValues(Math.sin(now), Math.cos(now), 0)
										);
										mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
										return modelViewProjectionMatrix;
									}
								}
							}
						}
					],
					uniformTextureAndSampler: {
						myTexture: { type: "texture", value: texture },
						mySampler: { type: "sampler", value: sampler }
					},
					renderState: {
						targets: [
							{
								format: presentationFormat
							}
						],
						primitive: {
							topology: "triangle-list",
							cullMode: "back"
						},
						depthStencil: {
							depthWriteEnabled: true,
							depthCompare: "less",
							format: "depth24plus"
						}
					},
					draw: {
						count: 36,
						instanceCount: 1
					}
				});

				function animate() {
					requestAnimationFrame(animate);
					const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
					model.render({ device: context.device, passEncoder });
					canvasRenderTarget.endRenderPass();
				}
				animate();
			};
			init();
		</script>
	</body>
</html>
